<template>
  <div class="myTable" v-loading="loading">
    <div class="advanced">
      <el-button @click="changePage">点击</el-button>
    </div>
    <div class="container">
      <el-table
        ref="tableRef"
        :data="dataSource"
        stripe
        :row-key="rowKey"
        :height="'100%'"
        :max-height="'100%'"
        @sort-change="sortChange"
        v-bind="$attrs"
        @select="select"
        @select-all="selectAll"
        v-on="$listeners"
      >
        <template v-for="(col, index) in columns">
          <template v-if="col.type === 'index'">
            <el-table-column
              :key="col.type"
              v-bind="col"
              :index="index + 1 + (pageNum - 1) * pageSize"
            />
          </template>
          <template v-else-if="col.type === 'selection'">
            <el-table-column
              :key="col.type"
              :selectable="selectable"
              v-bind="col"
              :reserve-selection="true"
            >
              <template #header>222 </template>
            </el-table-column>
          </template>
          <template v-else-if="col.type">
            <el-table-column :key="col.type" v-bind="col" />
          </template>
          <template v-else>
            <el-table-column
              :key="col.label ? col.label : index"
              v-bind="col"
              :show-overflow-tooltip="true"
            >
              <template #header
                >{{ col.label }}
                <FilterOperate
                  v-if="col.fliterConfig"
                  :updateFilter="filterData(col)"
                  :fliterConfig="col.fliterConfig"
                />
              </template>
              <template slot-scope="scope">
                <template v-if="col.render">
                  <RenderCpn :scope="scope" :render="col.render" />
                </template>
                <template v-else>{{
                  scope.row[col.prop] ? scope.row[col.prop] : "-"
                }}</template>
              </template>
            </el-table-column>
          </template>
        </template>
      </el-table>
    </div>
    <div class="footer" v-show="dataSource.length">
      <el-pagination
        @size-change="setPageSize"
        @current-change="setPageNum"
        :current-page="pageNum"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="pageLayout"
        :total="pageTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import RenderCpn from "./render/renderCpn";
import DefineProps from "./mixin/props";
import Pagination from "./mixin/pagination";
import network from "./mixin/network";
import SortCare from "./cpn/sortCare.vue";
import FilterOperate from "./cpn/filterOperate.vue";

export default {
  mixins: [DefineProps, Pagination, network],
  components: { RenderCpn, SortCare, FilterOperate },
  data() {
    return {
      selection: [],
      loading: false,
      dataSource: [
        {
          date: "2016-05-02",
          name: "王棒槌",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "毛丹丹",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    const { autoLoad, params } = this;
    const { pageNum = 1, pageSize = 10, conditions = [] } = params;
    this.data = params;
    this.pageNum = pageNum;
    this.pageSize = pageSize;
    this.conditions = conditions;
    if (autoLoad) {
      this.loadData();
    }
  },
  methods: {
    selectable(row) {
      if (this.singleSelect) {
        if (this.selection.length) {
          return this.selection[0][this.rowKey] === row[this.rowKey];
        } else {
          return true;
        }
      } else {
        return true;
      }
    },
    changePage() {
      // this.$refs.tableRef.toggleAllSelection()
      // console.log(this.selection);
      this.dataSource.map((row) => {
        this.$refs.tableRef.toggleRowSelection(row);
      });
    },
    select(selection, row) {
      this.selection = selection;
      console.log("select", selection, row);
    },
    selectAll(selection) {
      this.selection = selection;
      console.log("selectAll", selection);
    },
    sortChange({ prop, order }) {
      this.data = {
        ...this.data,
        orderBy: prop,
        direction: order,
      };
      this.mtLoad();
    },
    filterData({ prop, fliterConfig }) {
      const key = prop;
      const { operate: op, conditionFormatBefore } = fliterConfig;
      return (value) => {
        if (!conditionFormatBefore) {
          const hasValue = Array.isArray(value) ? value.length : value;
          this.conditions = this.conditions.filter((cod) => cod.key !== key);
          if (hasValue) {
            this.conditions.push({ key, op, value: value });
          }
        } else {
          this.conditions = conditionFormatBefore(this.conditions, key, value);
        }
        this.mtLoad();
      };
    },
  },
};
</script>

<style scoped>
.myTable {
  width: 100%;
  max-width: 100%;
  min-width: 50px;
  min-height: 100px;
  height: 100%;
  max-height: 100%;
}
.advanced {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.container {
  width: 100%;
  height: calc(100% - 100px);
}
.footer {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
